<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/JsExcelXml.js"></script>
		<script>
		//导出数据到excel文件

		function exportExcel()
		{
			var columnsInfo = [];//列设置

			var data = [];//数据

			
			$("#grid").find("th").each(function(i) {
                var text = $(this).text();
				var column = { field: text, title: text};
                columnsInfo.push(column);
            });
			$("#grid").find("tr").each(function(i) {
				if(i == 0) return true;
				var dataObj = new Object();
				$(this).find("td").each(function(j) {
					var column = columnsInfo[j];
					var text = $(this).text();
					dataObj[column.field] = text;
				});
				data.push(dataObj);
            });
 
	
			//导出excel设置

			var opts = {
				HeadInfo: [columnsInfo],
				RowInfo: data,
				FooterInfo: null,
				MergeCells: null,
				CellStyles: null,
				MainTitle: { Displayname: '', Alignment: 'Center', BgColor: '#FFFFFF', FontSize: 16, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
				SecondTitle: { Displayname: '', Alignment: 'Left', BgColor: '#FFFFFF', FontSize: 14, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
				HeadStyle: { Alignment: 'Center', BgColor: '#D8D8D8', FontSize: 12, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
				DataStyle: { Alignment: 'Center', BgColor: '#FFFFFF', FontSize: 10, FontColor: "#000000", IsBold: false, IsItalic: true, IsUnderLine: false },
				FootStyle: { Alignment: 'Center', BgColor: '#D8D8D8', FontSize: 12, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
				RowStart: 1,
				ColumStart: 1,
				SheetName: 'sheet'
			}
			var excelxml = JSXmlExcel.BulidXml(opts);//导出的excel对应的xml字符串

			
			if ($.browser.msie) { //如果是IE浏览器，ie方式的导出

				var xlsWin = null;
				if (!!document.all("glbHideFrm")) {
					xlsWin = glbHideFrm;
				} else {
					var width = 1; var height = 1;
					var openPara = "left=" + (window.screen.width / 2 + width / 2) + ",top=" + (window.screen.height + height / 2) + ",scrollbars=no,width=" + width + ",height=" + height;
					xlsWin = window.open("", "_blank", openPara);
				}
				xlsWin.document.write(excelxml);
				xlsWin.document.close();
				xlsWin.document.execCommand('Saveas', true, "导出数据.xls");
				xlsWin.close();
			}else{ //其他浏览器的导出

				var urlObject = window.URL || window.webkitURL || window;
				var export_blob = new Blob([excelxml]);
				var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
				save_link.href = urlObject.createObjectURL(export_blob);
				save_link.download = "导出数据.xls";
				var ev = document.createEvent("MouseEvents");
				ev.initMouseEvent(
					"click", true, false, window, 0, 0, 0, 0, 0
					, false, false, false, false, 0, null
					);
				save_link.dispatchEvent(ev);
			}
			
		}
		
		</script>
	</head>

	<body>
		<button onclick="exportExcel();return false;">导出数据为excel文件</button><br><br>

		<style type="text/css">
		table.gridtable {
			font-family: verdana,arial,sans-serif;
			font-size:11px;
			color:#333333;
			border-width: 1px;
			border-color: #666666;
			border-collapse: collapse;
		}
		table.gridtable th {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #dedede;
		}
		table.gridtable td {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #ffffff;
		}
		</style>

 
		<table id="grid" class="gridtable">
		<tr>
			<th>Header1</th><th>Header2</th><th>Header3</th>
		</tr>
		<tr>
			<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
		</tr>
		<tr>
			<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
		</tr>
		</table>


		
	</body>

</html>